<template>
  <div class="MapEquipmentRight-page">
    <div class="MapEquipmentRight-top">
      <div class="childpage-title">{{ title }}列表</div>
      <div class="equipment-map-right-top-status" v-if="currentType != 81 && currentType != 82 && currentType != 83">
        <template v-if="currentType != 3 && currentType != 4">
          <span class="alarm" :class="searchForm.status === 10 ? 'selected' : ''" @click="changeStatus(10)">报警</span>
          <span class="default" :class="searchForm.status === 20 ? 'selected' : ''" @click="changeStatus(20)">故障</span>
          <!-- <span class="link" @click="changeStatus(30)">联动</span> -->
          <span class="normal" :class="searchForm.status === 0 ? 'selected' : ''" @click="changeStatus(0)">正常</span>
        </template>
        <template v-else>
          <span class="normal" :class="searchForm.status === 0 ? 'selected' : ''" @click="changeStatus(0)">在线</span>
          <span class="alarm" :class="searchForm.status === 10 ? 'selected' : ''" @click="changeStatus(10)">离线</span>
        </template>
      </div>
    </div>
    <!-- 搜索区域 -->
    <div class="search-content">
      <el-input
        placeholder="请输入内容"
        v-model="searchForm.queryContent"
        @change="handleQueryChange"
        class="input-with-select"
        @keyup.enter.native="getList(0)"
      >
        <!-- 这个地方 先将选择框给注释掉  与全局的选择框冲突 -->
        <!-- <el-select
                    v-model="searchForm.orgId"
                    filterable
                    slot="prepend"
                    @change="getList(0)"
                >
                    <el-option
                        v-if="isMuilUnitUser"
                        label="所有单位"
                        :value="$store.state.userInfo.organizationIds"
                    ></el-option>
                    <el-option
                        v-for="item in orgList"
                        :label="item.orgName"
                        :value="item.orgId.toString()"
                        :key="item.orgId"
                    ></el-option>
        </el-select>-->
        <i class="el-icon-search el-input__icon" slot="prefix"></i>
      </el-input>
    </div>
    <!-- 列表区域 -->
    <div class="equipment-map-right-bottom" ref="scrollParent">
      <div v-show="currentType == 3 || currentType == 4" class="equipment-map-right-bottom-status">
        <span
          :class="
            searchForm.videoTypes.split(',').indexOf('1') > -1 ? 'selected' : ''
          "
          @click="changevideoTypes('1')"
        >烟火分析</span>
        <span
          :class="
            searchForm.videoTypes.split(',').indexOf('2') > -1 ? 'selected' : ''
          "
          @click="changevideoTypes('2')"
        >无人值守</span>
        <span
          :class="
            searchForm.videoTypes.split(',').indexOf('3') > -1 ? 'selected' : ''
          "
          @click="changevideoTypes('3')"
        >消防通道</span>
        <!-- <span :class="searchForm.videoTypes.split(',').indexOf('4')>-1?'selected':''" @click="changevideoTypes('4')">安全出口</span> -->
        <span :class="
            searchForm.videoTypes.split(',').indexOf('5') > -1 ? 'selected' : ''
          " @click="changevideoTypes('5')">其他</span>
      </div>
      <ul v-infinite-scroll="getList" :infinite-scroll-disabled="isOver">
        <template>
          <div
            :class="
              item.status === 10 ? 'bg-10' : item.status === 20 ? 'bg-20' : ''
            "
            class="equipment-item"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="equipment-item-left">
              <el-image fit="cover" :src="item.pictureUrl ? item.pictureUrl.split(',')[0] : ''">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="equipment-item-right">
              <div class="equipment-item-right-top" @click="enterEquipment(item);fixedPosition(item)">
                <span class="left" :style="{ color: transColor(item) }">
                  {{
                  transStatus(item)
                  }}
                </span>
                <div class="right">{{ item.name || "无名称信息" }}</div>
              </div>
              <div class="equipment-item-right-bottom" @click="fixedPosition(item)">
                <span class="left position"></span>
                <div class="right">{{ item.location || "无位置信息" }}</div>
              </div>
            </div>
          </div>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { getMarkListByType } from '@/api/gis'
import { getCurrentPosition } from '@/api/baiduapi'
import {
  FunDengLu,
  FunBaoChi,
  FunClear,
  FunDwGetOne,
  FunDwGetZu,
  FunDwGetChe,
} from '@/api/zhdserviceapi'
import transWGS from '@/utils/transWGS.js'
import '@/styles/common/childPage.scss'
export default {
  name: 'MapEquipmentRight',
  components: {},
  props: {
    parames: {
      required: true,
    },
  },
  computed: {
    wsData: function () {
      return this.$store.state.wsData
    },
    orgList() {
      return this.$store.state.orgList
    },
  },
  watch: {
    // wsData(val) {
    //   if ([41020, 41021, 41022].indexOf(val.type) > -1) {
    //     this.getList(this.pageIndex)
    //     this.getMarkData()
    //   }
    // },
  },
  data() {
    return {
      title: '设备',
      currentType: '',
      dtype: '',
      dataList: [],
      searchForm: {
        queryContent: '',
        status:
          '' /* 状态（10报警/未完成/离线 20故障/非计划中 0正常/已完成/在线） */,
        fcfId: '',
        orgId: '',
        videoTypes:
          '' /* 视频类型 1烟火分析 2无人值守 3消防通道 4安全出口 5其他 多个逗号分隔 */,
      },
      pageIndex: -1,
      pageSize: 20,
      isOver: false,
      isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser, //0:单单位用户;1:多单位用户
      p_Wy: '', // 车辆定位key
    }
  },
  created: function () {
    //处理doker
    let that = this

    this.carList = {} //消防车数据
    this.selectedTypes = []

    that.searchForm.orgId = that.parames.orgIds.toString()

    that.dtype = localStorage.getItem('ilinkBs_currentMapType')
    if (that.dtype == 4) that.dtype = 2

    /*
     * 改变右侧展示模块方法
     */
    window.FunList.changeRightModel_MapEquipmentRight = that.changeModel

    if (that.parames.selectedTypes && that.parames.selectedTypes.length > 0) {
      that.changeModel(that.parames)
    }

    //蜂鸟地图切换楼层和场景调用
    window.FunList.refreshmapEquip = that.getMarkData

    if (that.hasCar()) {
      FunDengLu({}, (data) => {
        that.p_Wy = data.z3
        FunDwGetZu(
          {
            p_Wy: that.p_Wy,
            p_strTj: '',
            p_iFs: 0,
          },
          (data) => {
            FunDwGetChe(
              {
                p_Wy: that.p_Wy,
                p_ZuId: '',
                p_Idx: 0,
                p_Co: 50,
              },
              (data) => {}
            )
          }
        )
      })
    }
  },
  beforeDestroy: function () {
    if (this.hasCar() && this.p_Wy) {
      FunClear({
        p_Wy: this.p_Wy,
      })
    }
  },
  methods: {
    handleQueryChange() {
      this.$store.commit('setEquipmentQuery', this.searchForm.queryContent)
    },
    changeModel(_parames) {
      let that = this
      that.searchForm.status = ''
      that.searchForm.videoTypes = ''
      that.searchForm.queryContent = _parames.name || ''
      that.title = _parames.title
      that.selectedTypes = _parames.selectedTypes
      that.currentType =
        _parames.selectedTypes[_parames.selectedTypes.length - 1] || ''
      that.getList(0, () => (that.searchForm.fcfId = _parames.fcfId || ''))
      that.getMarkData()
    },
    changeStatus(status) {
      this.searchForm.status === status
        ? (this.searchForm.status = '')
        : (this.searchForm.status = status)
      this.getList(0)
    },
    changevideoTypes(status) {
      let arr = this.searchForm.videoTypes
        ? this.searchForm.videoTypes.split(',')
        : []
      if (arr.indexOf(status) > -1) {
        arr.splice(arr.indexOf(status), 1)
      } else {
        arr.push(status)
      }
      this.searchForm.videoTypes = arr.toString()
      this.getList(0)
    },
    getList(_pageIndex, setFcfId) {
      let that = this
      if (that.selectedTypes.length == 0) {
        that.dataList = []
        return
      }
      if (_pageIndex == 0) {
        that.searchForm.fcfId = ''
        that.$refs.scrollParent ? (that.$refs.scrollParent.scrollTop = 0) : ''
      }
      setFcfId && setFcfId()
      if (typeof _pageIndex != 'undefined') {
        that.pageIndex = _pageIndex
      } else {
        that.pageIndex += 1
      }
      that.$Ctl.loading(1, 10000)
      let param = {
        orgIds: that.searchForm.orgId,
        fcfId: that.searchForm.fcfId || '',
        type: that.currentType || '',
        dtype: that.dtype,
        queryType: 1,
        pageIndex: that.pageIndex,
        pageSize: that.pageSize,
        status: that.searchForm.status,
        queryContent: that.searchForm.queryContent,
      }
      if (that.currentType == 3 || that.currentType == 4) {
        param.videoTypes = that.searchForm.videoTypes
      }
      if (that.$store.state.currentMapType == 4) param.dtype = 2 // 如果地图为unity地图 则将dtype强改为2
      getMarkListByType(param).then((res) => {
        if (typeof _pageIndex != 'undefined' && that.pageIndex === 0) {
          that.isOver = false
          // 重新查询
          that.dataList = res.data || []
        } else {
          that.dataList.push.apply(that.dataList, res.data)
        }

        // 最后一页停止滚动加载
        if (res.data.length < that.pageSize) {
          that.isOver = true
        } else {
          that.isOver = false
        }
        that.$Ctl.loading(0)
      })
    },
    getMarkData(callback) {
      let that = this
      if (that.selectedTypes.length == 0) {
        that.$Ctl.setMapMark({}, true, false)
        return
      }
      that.$Ctl.loading(1, 10000)
      let gisInfo = JSON.parse(localStorage.getItem('ilinkBs_mapGisInfo'))
      let param = {
        orgIds: that.searchForm.orgId,
        type: that.selectedTypes.toString() || '',
        dtype: that.dtype,
        queryType: 0,
        indoorMapId: gisInfo.id || '',
      }
      if (that.$store.state.currentMapType == 4) param.dtype = 2 // 如果地图为unity地图 则将dtype强改为2
      getMarkListByType(param).then((res) => {
        // 地图打点
        let marksBbj = {}
        let getBaiDuDataFlag = false //是否要异步获取百度鹰眼数据
        let getBaiDuDataCount = 0 //要异步获取百度鹰眼数据次数
        $.each(that.selectedTypes, (index, typeName) => {
          marksBbj[typeName.toString()] = []
          $.each(res.data || [], (index1, obj1) => {
            if (obj1.type == typeName.toString()) {
              marksBbj[typeName.toString()].push(obj1)
            }
          })
          if (typeName == 81 || typeName == 82 || typeName == 83) {
            //对消防车做特殊处理
            getBaiDuDataFlag = true
            getBaiDuDataCount += marksBbj[typeName.toString()].length
          }
        })
        if (getBaiDuDataFlag && that.p_Wy) {
          FunBaoChi({
            p_Wy: that.p_Wy,
          })
          let carInfoArr = []
          $.each([81, 82, 83], (index, typeName) => {
            $.each(marksBbj[typeName], (index, obj) => {
              if (obj.remark == 2) {
                FunDwGetOne(
                  {
                    p_Wy: that.p_Wy,
                    p_CheId: obj.val,
                  },
                  (res) => {
                    if (res && res.bJd && res.bWd) {
                      if (that.$Ctl.isCs(true)) {
                        //三维
                        let carObj = {
                          id: obj.id,
                          carNo: obj.location,
                          lon: res.bJd,
                          lat: res.bWd,
                          alt: 0,
                          type: obj.type,
                        }
                        carInfoArr.push(carObj)
                        that.carList[obj.id] = carObj
                      } else {
                        if (that.dtype == 1) {
                          obj.info3d = JSON.stringify({
                            lon: res.bJd,
                            lat: res.bWd,
                          })
                          that.carList[obj.id] = obj.info3d
                        } else if (that.dtype == 2) {
                          obj.info3d = JSON.stringify([
                            window.FunList.transLocation_FMap(
                              {
                                lon: res.bJd,
                                lat: res.bWd,
                              },
                              true
                            ),
                          ])
                          that.carList[obj.id] = obj.info3d
                        }
                      }
                    } else {
                      that.$Ctl.message(
                        '未获取到【' + obj.name + '】位置数据！'
                      )
                    }
                    getBaiDuDataCount--
                    if (getBaiDuDataCount === 0) {
                      if (that.$Ctl.isCs(true)) {
                        //三维
                        that.$Cs.fireSpread(JSON.stringify(carInfoArr))
                      } else {
                        that.$Ctl.setMapMark(marksBbj, true, false)
                      }
                      that.$Ctl.loading(0)
                    }
                  },
                  (err) => {
                    getBaiDuDataCount--
                    if (getBaiDuDataCount === 0) {
                      if (that.$Ctl.isCs(true)) {
                        //三维
                        cs_showCarDist(JSON.stringify(carInfoArr))
                      } else {
                        that.$Ctl.setMapMark(marksBbj, true, false)
                      }
                      that.$Ctl.loading(0)
                    }
                  }
                )
              } else {
                /* 百度的鹰眼车辆定位 */
                getCurrentPosition(
                  obj.val,
                  (res) => {
                    if (res.status === 0) {
                      let latest_location = res.latest_point
                      if (latest_location) {
                        if (that.$Ctl.isCs(true)) {
                          //三维
                          let carObj = {
                            id: obj.id,
                            carNo: obj.location,
                            lon: '',
                            lat: '',
                            alt: 0,
                            type: obj.type,
                          }
                          let yingyanLonLat = transWGS.bd09_to_gcj02_to_wgs84(
                            latest_location.longitude,
                            latest_location.latitude
                          )
                          carObj.lon = yingyanLonLat[0].toString()
                          carObj.lat = yingyanLonLat[1].toString()
                          carInfoArr.push(carObj)
                          that.carList[obj.id] = carObj
                        } else {
                          if (that.dtype == 1) {
                            obj.info3d = JSON.stringify({
                              lon: latest_location.longitude,
                              lat: latest_location.latitude,
                            })
                            that.carList[obj.id] = obj.info3d
                          } else if (that.dtype == 2) {
                            obj.info3d = JSON.stringify([
                              window.FunList.transLocation_FMap(
                                {
                                  lon: latest_location.longitude,
                                  lat: latest_location.latitude,
                                },
                                true
                              ),
                            ])
                            that.carList[obj.id] = obj.info3d
                          }
                        }
                      }
                    } else {
                      that.$Ctl.message(
                        '未获取到【' + obj.name + '】位置数据！'
                      )
                    }
                    getBaiDuDataCount--
                    if (getBaiDuDataCount === 0) {
                      if (that.$Ctl.isCs(true)) {
                        //三维
                        that.$Cs.fireSpread(JSON.stringify(carInfoArr))
                      } else {
                        that.$Ctl.setMapMark(marksBbj, true, false)
                      }
                      that.$Ctl.loading(0)
                    }
                  },
                  (err) => {
                    getBaiDuDataCount--
                    if (getBaiDuDataCount === 0) {
                      if (that.$Ctl.isCs(true)) {
                        //三维
                        cs_showCarDist(JSON.stringify(carInfoArr))
                      } else {
                        that.$Ctl.setMapMark(marksBbj, true, false)
                      }
                      that.$Ctl.loading(0)
                    }
                  }
                )
              }
            })
          })
        } else {
          that.$Ctl.setMapMark(marksBbj, true, false)
          that.$Ctl.loading(0)
        }
        callback && callback()
      })
    },
    fixedPosition(item) {
      let that = this
      if (item.type == 81 || item.type == 82 || item.type == 83) {
        //消防车
        let info3d = that.carList[item.id]
        if (!info3d) {
          that.$Ctl.message('暂无位置信息！', 'warning')
          return
        }
        if (that.$Ctl.isCs(true)) {
          //三维
          that.$Cs.fireCarFly(
            info3d.id,
            info3d.carNo,
            info3d.lon ? info3d.lon : '',
            info3d.lat ? info3d.lat : '',
            info3d.alt,
            info3d.type
          )
        } else {
          item.info3d = info3d
          that.$Ctl.fixedPosition(item)
        }
      } else {
        that.$Ctl.fixedPosition(item)
      }
    },
    enterEquipment(item) {
      //没有关联消防设施的设备，点击不要进入设备详情，直接提示无关联消防设施
      let that = this
      if (!that.$Ctl.getClickEnabel(1)) return
      if (item.type == 3 || item.type == 4) {
        //播放视频
        that.$Ctl.getVideoDetail(item.id)
      } else if (item.type == 81 || item.type == 82 || item.type == 83) {
        //消防车
        that.$Ctl.openPopup('CarDetail', item.id)
      } else {
        //常规探测器集合
        that.$Ctl.openPopup('DeviceDetails', item.id)
      }
    },
    transColor(item) {
      if (item.type == 3 || item.type == 4) {
        return item.isOnline == 0 ? '#D3D3D3' : '#63AF8D'
      }
    },
    transStatus(item) {
      if (item.type == 3 || item.type == 4) {
        return item.isOnline == 0 ? '离线' : '在线'
      }
    },
    hasCar() {
      var reg = RegExp(/81|82|83/)
      return reg.test(this.bsConfig.Docker)
    },
  },
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.MapEquipmentRight-page {
  height: 100%;
  width: 100%;
  .MapEquipmentRight-top {
    height: 80px;
    line-height: 80px;
    .childpage-title {
      float: left;
      width: 200px;
      line-height: 80px;
      white-space: nowrap;
    }
    .equipment-map-right-top-status {
      float: right;
      text-align: right;
      width: calc(100% - 200px);
      padding-right: 25px;
      span {
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 1px;
        color: rgba(255, 255, 255, 0.5);
        padding: 2px 15px;
        cursor: pointer;
        &.alarm.selected {
          color: #ce334f;
          border: 1px solid #ce334f;
        }
        &.default.selected {
          color: #f0a045;
          border: 1px solid #f0a045;
        }
        &.link.selected {
          color: #4699ff;
          border: 1px solid #4699ff;
        }
        &.normal.selected {
          color: #1ab46c;
          border: 1px solid #1ab46c;
        }
      }
    }
  }
  .search-content {
    margin: 25px 0;
    width: 95%;
    height: 51px;
    background: url(../../../assets/images/cards/search-bg.png) center center
      no-repeat;
    background-size: 100%;
    .el-select .el-input {
      width: 200px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
    .el-input-group__prepend,
    .el-input__inner,
    .el-input__prefix {
      background-color: rgba(255, 255, 255, 0);
      border: none;
      height: 50px;
      color: #fff;
    }
    input::-webkit-input-placeholder {
      color: #505961;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #505961;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #505961;
    }
    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #505961;
    }
    .el-input-group__prepend {
      border-right: 1px solid #223443;
    }
    .el-input--prefix > input.el-input__inner {
      padding-left: 45px;
    }
    .el-input__prefix {
      .el-input__icon {
        line-height: 50px;
        font-size: 22px;
        text-indent: 5px;
      }
    }
    .el-select .el-input {
      width: 200px;
    }
  }
  .equipment-map-right-bottom {
    height: calc(100% - 180px);
    overflow: auto;
    .equipment-map-right-bottom-status {
      float: right;
      height: 50px;
      text-align: right;
      padding-top: 5px;
      padding-right: 25px;
      span {
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 1px;
        color: rgba(255, 255, 255, 0.5);
        padding: 2px 15px;
        cursor: pointer;
        &.selected {
          color: #4596f9;
          border: 1px solid rgba(73, 157, 253, 1);
        }
      }
    }
    .equipment-item {
      padding: 10px 8px;
      margin-bottom: 15px;
      display: inline-block;
      width: calc(100% - 25px);
      &.bg-10 {
        background: rgba(255, 0, 0, 0.26);
      }
      &.bg-20 {
        background: rgba(255, 160, 50, 0.26);
      }
      .equipment-item-left {
        width: 50px;
        height: 50px;
        float: left;
        margin-top: 3px;
        .el-image {
          padding: 3px;
          width: 100%;
          height: 100%;
        }
      }
      .equipment-item-right {
        float: left;
        width: calc(100% - 80px);
        .equipment-item-right-top {
          font-size: 20px;
          margin: 0 10px;
          .left {
            float: left;
            color: #d59449;
            margin-right: 10px;
          }
          .right {
            color: #fff;
            display: inline-block;
            width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .equipment-item-right-bottom {
          margin: 0 10px;
          cursor: pointer;
          .iconfont {
            color: #fff;
            cursor: pointer;
          }
          .left {
            float: left;
            background: url(../../../assets/images/homeLeft/fix.png) 0 0
              no-repeat;
            width: 20px;
            height: 16px;
            background-size: contain;
            margin-top: 0.2em;
          }
          .right {
            font-size: 16px;
            color: #a3bedd;
            display: inline-block;
            width: 80%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.MapEquipmentRight-page {
  .search-content {
    .el-input-group__prepend,
    .el-input__inner,
    .el-input__prefix {
      background-color: rgba(255, 255, 255, 0);
      border: none;
      height: 50px;
      color: #fff;
    }
    input::-webkit-input-placeholder {
      color: #505961;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #505961;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #505961;
    }
    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #505961;
    }
    .el-input-group__prepend {
      border-right: 1px solid #223443;
    }
    .el-input--prefix > input.el-input__inner {
      padding-left: 45px;
    }
    .el-input__prefix {
      .el-input__icon {
        line-height: 50px;
        font-size: 22px;
        text-indent: 5px;
      }
    }
    .el-select .el-input {
      width: 200px;
    }
  }
}
</style>
